<template>
	<!-- 父页面页面边距 20 rpx   -->
	<view class="health-card" @click="onClick">
		<text class="health-card-area">四川省卫生健康委员会</text>
		<view class="user">
			<view class="userName">
			{{userInfo.name}}
			<text class="default" v-if="userInfo.loginStatus==1">默认</text>
			</view>
			<text class="cardNo">{{idCardNo}}</text>
		</view>
		<view class="erCode">
			<image :src="imgUrl" mode="scaleToFill"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			userInfo:{
				type:Object,
				default:()=>{
					return {}
				}
			},
			imgUrl:{
				type:String,
				default:'../../static/images/health-card/er_code.png'
			}
		},
		computed:{
			idCardNo(){
				let res = '';
				if(this.userInfo && this.userInfo.cardNo){
					res = `${this.userInfo.cardNo.substr(0,4)}**********${this.userInfo.cardNo.substr(14)}`
				}
				return res;
			}
		},
		methods:{
			onClick(){
				this.$emit('onHealth',this.userInfo)
			}
		}
	}
</script>

<style scoped lang="scss">
	$uer-color:#2B2B2B;
	.health-card{
		height: calc((100vw - 40rpx) * 35 / 62 );
		background-image: url(http://scwinning.com.cn/health-card-bg.png);
		background-size: calc(100vw - 40rpx);
		position: relative;
		background-color: transparent;
		border-radius: 10rpx;
		&-area{
			font-size: 26rpx;
			position: absolute;
			top: 40rpx;
			left: 50rpx;
			height: 50rpx;
			font-weight: bold;
		}
		.user{
			display: flex;
			flex-direction: column;
			color: $uer-color;
			position: absolute;
			bottom: 100rpx ;
			left: 50rpx;
			.userName{
				font-size: 40rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
				.default{
					font-size: 12px;
					margin-left: 20rpx;
					border: 1px solid $theme-color;
					padding: 2rpx 6rpx;
					border-radius: 6rpx;
					color: $theme-color;
				}
			}
			.cardNo{
				font-size:32rpx ;
				font-weight: bold;
			}
		}
		.erCode{
			height: 190rpx;
			width: 190rpx;
			position: absolute;
			right: 26rpx;
			bottom: 90rpx;
			padding: 5rpx;
			background-color: #fff;
			>image{
				height: 180rpx;
				width: 180rpx;
			}
		}
	}
</style>
